<!-- 前台店长 – 首页 – 会员管理		management -->
<template>
	<view class="warps">
		<view class="" style="background:#F3F3F3;width: 750rpx;height: 68rpx;">
			<view class="w90s f b c p_t_20">
				<view class="vw60 f b c">
					<view class="f d c" :class="DC==0?'hei':'hui'" @click="DCs(0)">
						<text class="fs24 bold">全部</text>
					</view>
					<view class="f d c" :class="DC==1?'hei':'hui'" @click="DCs(1)">
						<text class="fs24 bold">新增</text>
					</view>
					<view class="f d c" :class="DC==2?'hei':'hui'" @click="DCs(2)">
						<text class="fs24 bold">停用</text>
					</view>
					<view class="f d c" :class="DC==3?'hei':'hui'" @click="DCs(3)">
						<text class="fs24 bold">僵尸会员</text>
					</view>
				</view>
				<view class="vw10 f b">
					<view>
						<image style="width: 20rpx;height: 20rpx;" src="../../../../static/img/104.png" mode=""></image>
					</view>
					<view>
						<text class="fs20 blue">管理</text>
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<!-- 全部 -->
			<view v-show="DC == 0">
				<view class="management-lan">
					<view class="">
						<view class="mine_top_zhong_kuan">
							<view class="sw-box1">
								<view class="single">
									<view class="w95s">
										<view class="f b c">
											<view class="p_t_10">
												<text class="fs16s">会员编号</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">姓名</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">性别</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">联系方式</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">入会时间</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">办卡类型</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">有效日期</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">最近消费日期</text>
											</view>
										</view>
									</view>
								</view>
								<view class="singles" v-for="(item,index) in 20" :key="index">
									<view class="w95s" >
										<view class="f b c" @click="a">
											<view class="p_t_10">
												<text class="fs16">会员编号</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">姓名</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">性别</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">联系方式</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">入会时间</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">办卡类型</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">有效日期</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">最近消费日期</text>
											</view>
										</view>
									</view>
									<view class="quanxians"></view>
								</view>

							</view>
						</view>
					</view>

				</view>
			</view>
			<!-- 新增 -->
			<view v-show="DC == 1">
				<view class="management-lan">
					<view class="">
						<view class="mine_top_zhong_kuan">
							<view class="sw-box1">
								<view class="single">
									<view class="w95s">
										<view class="f b c">
											<view class="p_t_10">
												<text class="fs16s">会员编号</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">姓名</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">性别</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">联系方式</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">入会时间</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">办卡类型</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">有效日期</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">最近消费日期</text>
											</view>
										</view>
									</view>
								</view>
								<view class="singles" v-for="(item,index) in 10" :key="index">
									<view class="w95s">
										<view class="f b c" @click="a">
											<view class="p_t_10">
												<text class="fs16">会员编号</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">姓名</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">性别</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">联系方式</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">入会时间</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">办卡类型</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">有效日期</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">最近消费日期</text>
											</view>
										</view>
									</view>
									<view class="quanxians"></view>
								</view>
			
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="DC == 2">
				<view class="management-lan">
					<view class="">
						<view class="mine_top_zhong_kuan">
							<view class="sw-box1">
								<view class="single">
									<view class="w95s">
										<view class="f b c" >
											<view class="p_t_10">
												<text class="fs16s">会员编号</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">姓名</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">性别</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">联系方式</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">入会时间</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">办卡类型</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">有效日期</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">最近消费日期</text>
											</view>
										</view>
									</view>
								</view>
								<view class="singles" v-for="(item,index) in 7" :key="index">
									<view class="w95s">
										<view class="f b c" @click="a">
											<view class="p_t_10">
												<text class="fs16">会员编号</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">姓名</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">性别</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">联系方式</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">入会时间</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">办卡类型</text>
											</view>
											<view class="p_t_10">
												<text class="fs16 red">已停用</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">最近消费日期</text>
											</view>
										</view>
									</view>
									<view class="quanxians"></view>
								</view>
			
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="DC == 3">
				<u-sticky offset-top="0" v-if="show">
					<!-- 只能有一个根元素 -->
					<view class="sticky">
						<view class="w90s f b c">
							<view>
								<text class="fs16" style="color:#CE2424;">提示：&nbsp;会员6个月以上(包括6个月)没有上课为僵尸会员！</text>
							</view>
							<view>
								<image @click="delData()" style="width: 20rpx;height: 20rpx;" src="../../../../static/img/103.png" mode=""></image>
							</view>
						</view>
					</view>
				</u-sticky>
				<view class="management-lan">
					<view class="">
						<view class="mine_top_zhong_kuan">
							<view class="sw-box1">
								<view class="single">
									<view class="w95s">
										<view class="f b c">
											<view class="p_t_10">
												<text class="fs16s">会员编号</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">姓名</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">性别</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">联系方式</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">入会时间</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">办卡类型</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">有效日期</text>
											</view>
											<view class="p_t_10">
												<text class="fs16s">最近消费日期</text>
											</view>
										</view>
									</view>
								</view>
								<view class="singles" v-for="(item,index) in 10" :key="index">
									<view class="w95s">
										<view class="f b c" @click="a">
											<view class="p_t_10">
												<text class="fs16">会员编号</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">姓名</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">性别</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">联系方式</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">入会时间</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">办卡类型</text>
											</view>
											<view class="p_t_10">
												<text class="fs16">有效日期</text>
											</view>
											<view class="p_t_10">
												<text class="fs16 red">日期(距今时间)</text>
											</view>
										</view>
									</view>
									<view class="quanxians"></view>
								</view>
			
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DC: 0, //  0:我的统计   1:团队统计
				show:true
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '会员管理'
			})
		},
		methods: {
			a(){
				uni.navigateTo({
					url:"../details/details"
				})
			},
			DCs(e) {
				this.DC = e
			},
			delData(res){
				let that = this
					console.log("删除")
					uni.showModal({
					    title: '提示',
					    content: "确认删除吗？",
					    success: function (res) {
						if (res.confirm) {
							that.show = false
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					    }
					});
				}
		}
	}
</script>

<style scoped>
	.warps {
		overflow: hidden;
		background-color: #fff;
	}
	.sticky {
		width: 750rpx;
		height: 66rpx;
		line-height: 66rpx;
		/* opacity: 0.3; */
		background: #F0BCBC;
		text-align: center;
	}
	.fs16s{
		font-size: 16rpx;
		transform: scale(0.4);
		color:#fff;
	}
	.mine_top_zhong_kuan{
		width:750rpx;
		/* height:650rpx; */
		overflow:scroll;
		/* margin-top:20rpx; */
	}
	.sw-box1{
		width:100%;
		/* height:650rpx; */
		background-color:#fff;
		margin:0rpx auto;
		border-radius:24rpx;
	}
	.single{
		width:160%;
		height: 58rpx;
		opacity: 1;
		background: #1f73f2;
	}
	.singles{
		width:160%;
		height: 66rpx;
		opacity: 1;
		background: #fff;
	}
	.statistical-but{
		margin:0 auto;
		margin-top:400rpx;
	}
	.quanxians{
		width: 1200rpx;
		height: 2rpx;
		opacity:0.2;
		border: 2rpx solid #dcdcdc;
		margin-top:10rpx;
	}
</style>
